<template>
  <div class="monitoring-system">
    <!-- 系统标题栏 -->
    <div class="system-header">
      <div class="title-group">
        <h1>水域监测系统</h1>
        <div class="time-info">
          <span class="date">2025年4月27日 星期日</span>
          <span class="time">15:39:25</span>
        </div>
      </div>
      <div class="system-status">
        <span class="status-dot active"></span>
        <span>实时监测中</span>
      </div>
    </div>

    <div class="main-content">
      <!-- 地图容器 -->
      <div class="map-wrapper">
        <div id="mapContainer" class="map-container">
          <div class="map-controls">
            <button @click="centerToBoat" class="control-btn">
              <svg class="icon" viewBox="0 0 24 24">
                <path
                  d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
                />
              </svg>
              船舶定位
            </button>
            <div class="track-controls">
              <button
                @click="toggleTracking"
                :class="{ active: isTracking }"
                class="track-btn"
              >
                <span class="track-icon"></span>
                {{ isTracking ? "停止记录" : "开始记录" }}
              </button>
              <button
                @click="clearTrack"
                class="track-btn"
                v-if="boatPath.length > 0"
              >
                <svg class="icon" viewBox="0 0 24 24">
                  <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
                清除轨迹
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据面板 -->
      <div class="data-panel">
        <div class="panel-header">
          <h2>
            水域监测点 <span class="count-badge">{{ lakeList.length }}</span>
          </h2>
          <div class="search-box">
            <input
              type="text"
              placeholder="搜索水域名称..."
              v-model="searchQuery"
            />
          </div>
        </div>

        <!-- 船舶信息卡 -->
        <div class="boat-info-card">
          <div class="boat-status">
            <div class="boat-marker-icon">
              <div class="pulse-ring"></div>
              <div class="boat-icon"></div>
            </div>
            <div class="boat-details">
              <h3>天眼号监测船</h3>
              <div class="status-tag" :class="{ active: isTracking }">
                {{ isTracking ? "记录中" : "已暂停" }}
              </div>
            </div>
          </div>
          <div class="boat-data">
            <div class="data-item">
              <span class="data-label">当前位置</span>
              <span class="data-value">{{ formatPosition(boatPosition) }}</span>
            </div>
            <div class="data-item">
              <span class="data-label">轨迹点数</span>
              <span class="data-value">{{ boatPath.length }}</span>
            </div>
          </div>
        </div>

        <!-- 水域列表 -->
        <div class="lake-list">
          <div
            v-for="lake in filteredLakes"
            :key="lake.id"
            @click="focusOnLake(lake)"
            :class="['lake-card', { active: activeLake === lake.id }]"
          >
            <div class="lake-header">
              <div class="lake-icon"></div>
              <div class="lake-name">{{ lake.name }}</div>
              <div class="lake-distance">
                {{ calculateDistance(lake.location) }} km
              </div>
            </div>
            <div class="lake-data">
              <div class="data-row">
                <span>坐标</span>
                <span
                  >{{ lake.location[0].toFixed(6) }},
                  {{ lake.location[1].toFixed(6) }}</span
                >
              </div>
              <div class="data-row">
                <span>面积</span>
                <span>{{ lake.area }} km²</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, computed } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

// 系统状态
const map = ref(null);
const lakeList = ref([]);
const activeLake = ref(null);
const boatMarker = ref(null);
const boatPosition = ref([113.50987, 34.810952]); // 郑州轻工业大学科学校区精确坐标
const boatPath = ref([]);
const isTracking = ref(true);
const searchQuery = ref("");
const currentTime = ref("15:39:25");
// 在script setup部分添加小红旗坐标

// 计算属性
const filteredLakes = computed(() => {
  return lakeList.value.filter((lake) =>
    lake.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

// 初始化地图
onMounted(() => {
  initMap();
  startClock();
  if (isTracking.value) {
    startBoatMovement();
  }
});

const initMap = () => {
  AMapLoader.load({
    key: "a4e63bbdec2133370f2d80232df16e10",
    version: "2.0",
    plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MapType"],
  })
    .then((AMap) => {
      // 创建二维地图
      map.value = new AMap.Map("mapContainer", {
        zoom: 19,
        center: boatPosition.value,
        viewMode: "2D",
        showIndoorMap: false,
        features: ["bg", "road", "building"],
      });
      // 添加地图类型切换控件
      map.value.addControl(
        new AMap.MapType({
          defaultType: 0, // 默认显示标准地图
          showTraffic: false,
          showRoad: true,
        })
      );

      // 添加控件
      map.value.addControl(new AMap.Scale({ position: "LB" }));
      map.value.addControl(new AMap.ToolBar({ position: "RB" }));

      // 初始化船舶标记
      boatMarker.value = new AMap.Marker({
        position: boatPosition.value,
        content: createBoatMarker(),
        offset: new AMap.Pixel(-15, -15),
      });
      boatMarker.value.addTo(map.value);

      // 初始化轨迹线
      const pathLine = new AMap.Polyline({
        path: boatPath.value,
        strokeColor: "#1E90FF",
        strokeOpacity: 0.8,
        strokeWeight: 4,
        strokeStyle: "solid",
      });
      pathLine.addTo(map.value);

      loadLakeData(AMap);
    })
    .catch((e) => {
      console.error(" 地图初始化失败", e);
      loadMockData();
    });
};

// 创建船舶标记
const createBoatMarker = () => {
  return `
    <div class="custom-boat-marker">
      <div class="pulse-ring"></div>
      <div class="boat-icon"></div>
    </div>
  `;
};

// 加载湖泊数据
const loadLakeData = (AMap) => {
  // 郑州轻工业大学科学校区附近水域数据
  lakeList.value = [
    {
      id: "lake_01",
      name: "科学校区东湖",
      location: [113.6225, 34.8362],
      area: 1.8,
    },
    {
      id: "lake_02",
      name: "校园中心湖",
      location: [113.50927, 34.810942],
      area: 2.5,
    },
    {
      id: "lake_03",
      name: "北侧景观池",
      location: [113.6212, 34.8371],
      area: 0.8,
    },
    {
      id: "lake_04",
      name: "南侧生态池",
      location: [113.6221, 34.8349],
      area: 1.2,
    },
  ];

  // 添加校园水域边界
  const campusWater = new AMap.Polygon({
    path: [
      [113.621, 34.834],
      [113.623, 34.834],
      [113.624, 34.836],
      [113.623, 34.837],
      [113.621, 34.837],
      [113.62, 34.836],
    ],
    strokeColor: "#1E90FF",
    strokeWeight: 2,
    strokeOpacity: 0.8,
    fillColor: "#1E90FF",
    fillOpacity: 0.1,
  });
  campusWater.addTo(map.value);
};

// 船舶移动控制
let boatInterval = null;
const startBoatMovement = () => {
  // 先清除之前的定时器
  if (boatInterval) clearInterval(boatInterval);

  // 设置新的定时器
  boatInterval = setInterval(() => {
    // 在校园范围内随机移动
    boatPosition.value = [
      boatPosition.value[0] + (Math.random() * 0.0003 - 0.00015),
      boatPosition.value[1] + (Math.random() * 0.0003 - 0.00015),
    ];

    // 确保不超出校园范围
    boatPosition.value[0] = Math.max(
      113.62,
      Math.min(113.624, boatPosition.value[0])
    );
    boatPosition.value[1] = Math.max(
      34.834,
      Math.min(34.837, boatPosition.value[1])
    );

    // 更新船舶位置
    boatMarker.value.setPosition(boatPosition.value);

    // 记录轨迹
    if (isTracking.value) {
      boatPath.value.push([...boatPosition.value]);
      if (boatPath.value.length > 100) {
        boatPath.value.shift();
      }
    }
  }, 1000);
};

// 停止船舶移动
const stopBoatMovement = () => {
  if (boatInterval) {
    clearInterval(boatInterval);
    boatInterval = null;
  }
};

// 切换追踪状态
const toggleTracking = () => {
  isTracking.value = !isTracking.value;
  if (isTracking.value) {
    startBoatMovement();
  } else {
    stopBoatMovement();
  }
};

// 清除轨迹
const clearTrack = () => {
  boatPath.value = [];
};

// 定位到船舶
const centerToBoat = () => {
  map.value.setCenter(boatPosition.value);
  map.value.setZoom(16);
  activeLake.value = null;
};

// 聚焦湖泊
const focusOnLake = (lake) => {
  activeLake.value = lake.id;
  map.value.setCenter(lake.location);
  map.value.setZoom(17);
};

// 计算距离
const calculateDistance = (location) => {
  const [lng1, lat1] = boatPosition.value;
  const [lng2, lat2] = location;
  const rad = (d) => (d * Math.PI) / 180.0;
  const radLat1 = rad(lat1);
  const radLat2 = rad(lat2);
  const a = radLat1 - radLat2;
  const b = rad(lng1) - rad(lng2);
  let s =
    2 *
    Math.asin(
      Math.sqrt(
        Math.pow(Math.sin(a / 2), 2) +
          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
      )
    );
  s = s * 6378.137; // 地球半径
  s = Math.round(s * 10000) / 10000;
  return s.toFixed(2);
};

// 格式化位置
const formatPosition = (pos) => {
  return `${pos[0].toFixed(6)}, ${pos[1].toFixed(6)}`;
};

// 时钟更新
const startClock = () => {
  setInterval(() => {
    const now = new Date();
    currentTime.value = now.toLocaleTimeString();
  }, 1000);
};

// 应急数据
const loadMockData = () => {
  lakeList.value = [
    {
      id: "lake_01",
      name: "校园中心湖",
      location: [113.6218, 34.8356],
      area: 2.5,
    },
  ];
};
</script>
 
<style scoped>
/* 系统整体样式 */
.monitoring-system {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f8fa;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

.system-header {
  padding: 12px 20px;
  background: linear-gradient(135deg, #1a3a6e, #1e5fcc);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-group h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.time-info {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.9;
}

.time-info .time {
  margin-left: 8px;
  font-weight: 500;
}

.system-status {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  margin-right: 6px;
}

.status-dot.active {
  background: #00ff7f;
  box-shadow: 0 0 5px #00ff7f;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  height: calc(100vh - 52px);
}

/* 地图容器样式 */
.map-wrapper {
  position: relative;
  height: 100%;
}

.map-container {
  height: 100%;
  width: 100%;
}

.map-controls {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-btn {
  padding: 8px 12px;
  background: white;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.2s;
}

.control-btn:hover {
  background: #f0f9ff;
}

.track-controls {
  display: flex;
  gap: 8px;
}

.track-btn {
  padding: 8px 12px;
  background: white;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.2s;
}

.track-btn:hover {
  background: #f0f9ff;
}

.track-btn.active {
  background: #ff4757;
  color: white;
}

.track-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}

.icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* 数据面板样式 */
.data-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
  border-left: 1px solid #eaeef2;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #eaeef2;
}

.panel-header h2 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
}

.count-badge {
  background: #1e90ff;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}

.search-box input:focus {
  outline: none;
  border-color: #1e90ff;
}

/* 船舶信息卡片 */
.boat-info-card {
  padding: 12px 16px;
  border-bottom: 1px solid #eaeef2;
}

.boat-status {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.boat-marker-icon {
  position: relative;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1e90ff;
  opacity: 0.3;
  animation: pulse 2s infinite;
}

.boat-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #1e90ff;
  border-radius: 50%;
  top: 6px;
  left: 6px;
}

.boat-details {
  flex: 1;
}

.boat-details h3 {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.status-tag {
  display: inline-block;
  padding: 2px 6px;
  background: #eee;
  color: #666;
  border-radius: 4px;
  font-size: 11px;
  margin-top: 4px;
}

.status-tag.active {
  background: #00b894;
  color: white;
}

.boat-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.data-item {
  font-size: 13px;
}

.data-label {
  color: #666;
  display: block;
  margin-bottom: 2px;
}

.data-value {
  color: #333;
  font-weight: 500;
}

/* 水域列表样式 */
.lake-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}

.lake-card {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s;
}

.lake-card:hover {
  background: #f8fafc;
}

.lake-card.active {
  background: #f0f9ff;
}

.lake-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.lake-icon {
  width: 12px;
  height: 12px;
  background: #1e90ff;
  border-radius: 50%;
  margin-right: 8px;
}

.lake-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.lake-distance {
  font-size: 12px;
  color: #666;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
}

.lake-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12px;
}

.data-row {
  display: flex;
  justify-content: space-between;
}

.data-row span:first-child {
  color: #666;
}

.data-row span:last-child {
  color: #333;
  font-weight: 500;
}

/* 船舶标记样式 */
.custom-boat-marker {
  position: relative;
  width: 30px;
  height: 30px;
}

.custom-boat-marker .pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1e90ff;
  opacity: 0.3;
  animation: pulse 2s infinite;
}

.custom-boat-marker .boat-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #1e90ff;
  border-radius: 50%;
  top: 7px;
  left: 7px;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  70% {
    transform: scale(1.3);
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}
</style>